<!--  -->
<template>
  <div class="bbx-usualStateSelecet-box">
    <div v-for="(item, index) in stateList"
         :key="index"
         class="bbx-usualStateSelecet-list-box">
      <template v-if="item.showType == 'select'">
        <el-tooltip placement="bottom" v-if="item.hoverContent">
          <template slot="content">
            <span v-html="item.hoverContent"></span>
          </template>
          <div class="task-c7 bbx-usualStateSelecet-list-box-label">{{item.label}}</div>
        </el-tooltip>
        <div class="task-c7 bbx-usualStateSelecet-list-box-label" v-else>{{item.label}}</div>
        <div class="bbx-usualStateSelecet-list-item-box">
          <div v-for="(items, indexs) in item.children"
               :key="indexs"
               class="bbx-usualStateSelecet-list-item just-cur-point "
               @click="listItmeSelect(items, item)">
            <span class="bbx-usualStateSelecet-list-item-label"
                  :class="chooseRes && chooseRes[item.key] && chooseRes[item.key].includes(items.key) ? 'selected' : ''">{{items.label}}</span>
          </div>
        </div>
      </template>
      <div v-if="item.showType == 'type'">
        <div class="flex-x al-c">
          <div class="bbx-usualStateSelecet-list-type-item-box">
            <div v-for="(items, indexs) in item.children"
                 :key="indexs"
                 class="bbx-usualStateSelecet-list-item cur-point "
                 @click="listItmeSelect(items, item)">
              <div class="bbx-usualStateSelecet-list-item-label"
                   :class="chooseRes && chooseRes[item.key] && chooseRes[item.key].includes(items.key) ? 'selected' : ''">{{items.label}}</div>
            </div>
          </div>

          <div>
            <div class="filter-box">
              <el-tooltip placement="bottom">
                <template slot="content">
                  <span v-html="item.hoverContent"></span>
                </template>
                <i :class="`iconfont ${item.hoverIconClass}`"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'usual-state-select',
  props: {
    // 所有选择项
    stateList: {
      type: Array,
      default: () => [],
    },
    // // 存储已选
    chooseRes: {
      type: Object,
      default: () => { },
    },
  },
  emits: ['updateRes'],
  data () {
    return {
    };
  },
  methods: {
    /**
     * @des 初始化chooseRes
     */
    initChooseRes (propRes = {}) {
      let obj_ = {};
      this.stateList.forEach((element) => {
        let key_ = element.key;
        obj_[key_] = [];
        if (element.children) {
          if (Reflect.has(propRes, key_)) {
            obj_[key_] = propRes[key_];
          } else {
            if (element.children.find(item => item.key == 'all')) {
              obj_[key_] = ['all'];
            }
          }
        }
      });
      this.$emit('updateRes', obj_);
    },
    /**
     * @des 选择事件
     */
    listItmeSelect (item, parent) {
      let chooseRes_ = { ...this.chooseRes };
      let parentKey = parent.key;
      let itemKey = item.key;
      let haveAll = parent.haveAll;
      let isSelected = chooseRes_[parentKey].includes(itemKey);
      // 选中全部
      if (item.key == 'all') {
        if (isSelected) return;
        chooseRes_[parentKey] = ['all'];
        return this.$emit('updateRes', chooseRes_, { item, parent });
      }

      if (parent.mulity) {
        // 多选
        if (isSelected) {
          chooseRes_[parentKey] = chooseRes_[parentKey].filter(ele => ele !== item.key && ele !== 'all');
          return this.$emit('updateRes', chooseRes_, { item, parent });
        }
        chooseRes_[parentKey] = chooseRes_[parentKey].filter(ele => ele !== 'all');
        chooseRes_[parentKey].push(item.key);
        if (chooseRes_[parentKey].length <= 0 && haveAll) chooseRes_[parentKey] = ['all'];
      } else {
        // 单选
        if (isSelected) return;
        chooseRes_[parentKey] = [item.key];
      }
      this.$emit('updateRes', chooseRes_, { item, parent });
      this.$track.clickStat(this.$track.formatParams('CHAT_VIEWS_SWITCH'))
    }
  },
};
</script>
<style lang='scss' scoped>
$color-primaryRGB20:$color-primary-light-1;
$color-primaryRGB40:$color-primary-light-4;
$hover-icon-bg-color:#595959;
$text-color-808080:#808080;
.bbx-usualStateSelecet-list-box {
	font-size: 14px;
	display: flex;
  &-label{
      width: 90px;
    }
	.bbx-usualStateSelecet-list-item-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
    
		.bbx-usualStateSelecet-list-item {
      max-width: 160px;
		}
		.bbx-usualStateSelecet-list-item-label {
      display: inline-block;
			padding: 4px 8px;
      font-size: 13px;
      margin: 0 12px 8px 0;
      border: 1px solid rgba(0, 0, 0, 0 );
      color: $text-color-808080;
      &:hover{
        color: $color-primary;
      }
		}
		.selected {
			color: $color-primary;
			background: $color-primaryRGB20;
			border-radius: 4px;
			border: 1px solid $color-primary-light-2;
		}
	}

	.bbx-usualStateSelecet-list-type-item-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		.bbx-usualStateSelecet-list-item {
			&:first-child {
				.bbx-usualStateSelecet-list-item-label {
					border-left: 1px solid $color-border-l1;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
				}

			}
			&:last-child {
				.bbx-usualStateSelecet-list-item-label {
					border-top-right-radius: 4px;
					border-bottom-right-radius: 4px;
				}
			}
		}

		.bbx-usualStateSelecet-list-item-label {
			padding: 8px 15px;
			border-right: 1px solid $color-border-l1;
			border-top: 1px solid $color-border-l1;
			border-bottom: 1px solid $color-border-l1;
      
		}
		.selected {
			color: #fff;
			background-color: $color-primary;
			border-color: $color-primary;
		}
	}

	.color-tips-icon {
		color: $hover-icon-bg-color;
	}
  &:last-child{
    margin-bottom: 0;
  }
}
</style>